<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="http://www.mobiletrain.org/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2989423_g2bpxj3nqhk.css" />
    <link rel="stylesheet" href="../css/index.css">
    <title>千锋云音乐</title>
</head>
<body>
    <!-- captcha -->
    <section class="captcha" style="visibility: hidden;">
        <h2>
            <span>验证码</span>
            <i class="iconfont icon-close"></i>
        </h2>
        <div class="check">
            <img src="../imgs/captcha.jpeg" alt="">
            <img src="../imgs/captcha_zfx.png" alt="">
        </div>
        <div class="drag">
            <div class="btn"></div>
        </div>
    </section>
    <!-- captcha -->

    <!-- login -->
    <section class="login" style="visibility: hidden;">
        <div class="item">
            <div class="menu"></div>
            <div class="form">
                <p class="close"><i class="iconfont icon-close"></i></p>
                <p class="font">登录/注册</p>
                <input type="text" class="mobile" placeholder="请输入手机号">
                <p class="msg"></p>
                <input type="text" class="password" placeholder="请输入验证码" maxlength="4">
                <p class="msg"></p>
                <button class="captcha">获取验证码</button>
                <button class="submit">登录/注册</button>
            </div>
        </div>
    </section>
    <!-- login -->

    <!-- backTop -->
    <img src="../imgs/goTop.png" class="backTop">
    <!-- backTop -->

    <!-- 头 -->
    <header>
        <section>
            <img class="logo" src="../imgs/logo2.png" alt="logo">

            <ul class="navs">
                <li class="active"><a href="./index.html">首页</a></li>
                <li><a href="./song.html">歌单</a></li>
                <li><a href="./player.html">音乐盒</a></li>
                <li><a href="./video.html">视频</a></li>
            </ul>

            <div class="member">
                <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
                <i class="iconfont icon-sousuo"></i>
                <!-- <img src="“ ”/imgs/avatar.webp" alt="avatar"> -->
                <div><span>登录</span> <span>/</span> <span>注册</span></div>
            </div>
        </section>
    </header>
    <!-- 头 -->
    
    <!-- 轮播图 -->
    <section class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style=""><img src="../imgs/b1.jpeg" alt=""></div>
            <div class="swiper-slide" style=""><img src="../imgs/b2.jpeg" alt=""></div>
            <div class="swiper-slide" style=""><img src="../imgs/b3.jpeg" alt=""></div>
            <div class="swiper-slide" style=""><img src="../imgs/b4.jpeg" alt=""></div>
            <div class="swiper-slide" style=""><img src="../imgs/b5.jpeg" alt=""></div>
            <div class="swiper-slide" style=""><img src="../imgs/b6.jpeg" alt=""></div>
        </div>
        <!-- 轮播图 -->

        <!-- 分页器 -->
        <div class="swiper-prev">←</div>
        <div class="swiper-next">→</div>
    </section>
     <!-- 分页器 -->

    <!-- 主体 -->
    <section class="hot">
        <h1>热门推荐</h1>
        <ul onclick="location.href='./player.html'" style="margin-left: 0px;">
            <li><div><img src="../imgs/1.jpg" alt=""></div><span>一些听了会开心的歌</span></li>
            <li><div><img src="../imgs/2.jpg" alt=""></div><span>其实无论怎么选择都会有遗憾对吧</span></li>
            <li><div><img src="../imgs/3.jpg" alt=""></div><span>释怀吧不要再执着于没有结果的事情了</span></li>
            <li><div><img src="../imgs/4.jpg" alt=""></div><span>泛滥的玫瑰充斥烂尾的诗篇</span></li>
            
            <li><div><img src="../imgs/5.jpg" alt=""></div><span>可以邀请你和我一起去春天吗</span></li>
            <li><div><img src="../imgs/6.jpg" alt=""></div><span>早 这是今日出发路上的音乐早餐</span></li>
            <li><div><img src="../imgs/7.jpg" alt=""></div><span>如果情绪有天气 我陷在阴天里</span></li>
            <li><div><img src="../imgs/8.jpg" alt=""></div><span>携一把吉他，温三两故事，四海为家</span></li>

            <li><div><img src="../imgs/9.jpg" alt=""></div><span>音乐是生活的麻药</span></li>
            <li><div><img src="../imgs/10.jpg" alt=""></div><span>国产hiphop百听不厌</span></li>
            <li><div><img src="../imgs/11.jpg" alt=""></div><span>甜甜的rap当然要跟甜甜的你一起听</span></li>
            <li><div><img src="../imgs/12.jpg" alt=""></div><span>快乐覆盖快乐◇浪漫叠加浪漫</span></li>
        </ul>
    </section>
    <!-- 主体 -->

    <!-- 底部 -->
    <footer>
        <p>
            不要EMO 拒绝EMO
        </p>
        <p>
            <div>
                <span>深夜EMO</span>
                | 
                <span> 快来听音乐吧</span>
                |
        </p>
    </footer>
      <!-- 底部 -->
    <script src="../js/hot.js"></script>
    <script src="../js/login.js"></script>
    <script src="../js/swiper.js"></script>
    <script src="../js/nprogress.js"></script>
</body>
</html>

